import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx'
import { withRouter } from 'react-router-dom';
import { Tools, TextareaItem, Checkbox, List, Modal, Bubble, Button } from 'weaver-mobile';

const FormItem = List.FormItem
const getLabel = Tools.getLabel

@inject("taskDetailStore")
@withRouter
@observer
class UrgeTask extends React.Component {

    constructor(props) {
        super(props)
        this.state = { ...props,
            remindval:getLabel(517828, '请抓紧处理此任务'),
            pcheckval:1,
            ccheckval:0
        }
    }

    componentWillMount() {
       
    }

    componentWillReceiveProps(newProps) {
        
    }
    changeField(type,val){
        if(type!="remindval"){
            val = val.target.checked?1:0;
        }
        this.setState({[type]:val});
    }
    onBtnClick(type){
        if(type==2){
            this.props.history.go(-1);
        }else if(type==1){
            const{remindval,pcheckval,ccheckval} = this.state;
            if(pcheckval==0 && ccheckval==0){
                Bubble.warning(getLabel(32808,'请至少选择1个提醒对象'),1);
                return;
            }
            const {taskDetailStore,taskDetailStore:{taskid}} = this.props;
            let _this = this;
            taskDetailStore.taskChangeStatus({
                infos: getLabel(517830,'确认要催办此任务吗？'),
                taskId: taskid,
                refuseval:remindval,
                sendObject:pcheckval+","+ccheckval,
                status: 103,
                doback:function(){
                    _this.props.history.go(-1);
                }
            })
        }
    }
    render() {
        const {remindval,pcheckval,ccheckval} = this.state;
        return (
            <div className="wm-route-layout workrelate-mobile-task-urge-wrapper">
                <List>
                    <FormItem
                        label={getLabel(19090, "提醒消息")}
                        line
                        noBorder
                        content={
                            <TextareaItem
                                autoHeight
                                value={remindval}
                                onChange={val => { this.changeField("remindval", val) }}
                            />
                        }
                    />
                </List>
                <List>
                    <FormItem
                        label={getLabel(18013, '提醒对象')}
                        line
                        noBorder
                        content={
                            <span><Checkbox
                                checked={pcheckval}
                                onChange={val => {  this.changeField("pcheckval", val) }}
                            />{getLabel(84043, '责任人')}
                            <span style={{marginLeft:10}}>
                            <Checkbox
                                checked={ccheckval}
                                onChange={val => {  this.changeField("ccheckval", val) }}
                            />{getLabel(382557, '参与人')}</span></span>
                        }
                    />
                </List>
                <div>
                    <div className="confirm-btn-wrapper" onClick={()=>this.onBtnClick(2)}>
                        <Button type="ghost">{getLabel(31129, '取消')}</Button>
                    </div>
                    <div className="confirm-btn-wrapper confirm-btn-wrapper1" onClick={()=>this.onBtnClick(1)}>
                        <Button type="primary">{getLabel(33703, '确认')}</Button>
                    </div>
                </div>
            </div>
        )
    }
}

export default UrgeTask
